<template>
    <el-row type="flex" v-if="cType" style="margin-top:.5em;" :gutter="50">
        <el-col :span="16">
            <el-card>
                <template #header>
                    <el-row>
                        <el-col :span="18">
                            <div
                                style="text-align:left;font-weight:bold;font-size:1.2em;"
                            >{{ localeType }}</div>
                        </el-col>
                        <el-col :span="6" style="text-align:right;">
                            <router-link :to="{ name: cType }" class="more-link">更多</router-link>
                        </el-col>
                    </el-row>
                </template>
                <div v-for="a in articles" :key="a.id">
                    <el-row style="margin-top:.3em;padding:.3em 0;">
                        <el-col :span="18" style="text-align:left;font-size:1.2em;">
                            <router-link
                                :to="{ name: 'articleDetail', params: { id: a.id } }"
                                v-if="a.title"
                            >{{ a.title }}</router-link>
                        </el-col>
                        <el-col
                            :span="6"
                            style="font-size:.8em;color:gray;"
                        >{{ a.created_at ? $filters.timeFormatter(a.created_at) : "" }}</el-col>
                    </el-row>
                </div>
            </el-card>
        </el-col>
        <el-col :span="8">
            <el-card>
                <template #header>
                    <el-row>
                        <el-col :span="18">
                            <div
                                style="text-align:left;font-weight:bold;font-size:1.2em;"
                            >点击排行</div>
                        </el-col>
                        <el-col :span="6" style="text-align:right;">
                            <router-link :to="{ name: cType }" class="more-link">更多</router-link>
                        </el-col>
                    </el-row>
                </template>
                <div v-for="(a, idx) in hotArticles" :key="a.id" class="hot-item">
                    <el-space>
                    <span :class="idx<3?'super-hot-idx':'hot-idx'">{{idx+1}} </span>
                    <router-link
                        :to="{ name: 'articleDetail', params: { id: a.id } }"
                        v-if="a.title"
                    >{{ a.title }}</router-link>
                    <span style="font-size:.8em;">({{a.view_counter}})</span></el-space>
                </div>
            </el-card>
        </el-col>
    </el-row>
</template>

<script>
import { onMounted, ref } from 'vue'
import { getArticles } from '../api/articles'
import { getCategories } from '../api/categories'
export default {
    props: {
        cType: { type: String }
    },
    setup(props) {
        const articles = ref([])
        const hotArticles = ref([])
        const pageSize = 5
        const localeMap = {
            'programming': '编程',
            'interests': '兴趣',
            'entertainment': '娱乐',
            'others': '其他',
        }

        const localeType = localeMap[props.cType]

        onMounted(() => {
            getCategories(props.cType).then(res => {
                let categories = []
                for (let c of res.data) {
                    categories.push(c.id)
                }
                getArticles(0, pageSize, "false", "false", categories).then(res => {
                    articles.value = res.data.items
                })

                getArticles(0, pageSize, "false", "false", categories, "-view_counter").then(res => {
                    hotArticles.value = res.data.items
                })
            })


        })


        return {
            articles, localeType,hotArticles
        }
    }
}
</script>

<style>
.more-link {
    font-size: 0.8em;
    color: rgb(245, 219, 149);
    border: solid 1px rgb(255, 255, 255);
    border-radius: 0.5em;
    padding: 0.4em 0.6em;
    background-color: rgba(38, 108, 212, 0.733);
    /* box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1) */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}
.hot-item{
    text-align: left;
    margin:.5em 0;
}
.hot-idx{
    margin: 1em;
    background-color: rgba(138, 133, 133, 0.705);
    padding: .1em .4em;
    border-radius: .3em;
    border:rgba(64, 83, 252, 0.877) solid 1px;
}
.super-hot-idx{
    margin: 1em;
    background-color: rgba(247, 9, 9, 0.705);
    padding: .1em .4em;
    border-radius: .3em;
    border:rgb(114, 247, 147) solid 1px;
}
</style>